<template>
  <div class="personalContainer">
    <!-- 顶部打开APP组件 -->
    <UpView></UpView>
    <!-- 头部 -->
    <div class="header">
      <div class="leftBox">
        <div class="imgBox">
          <img :src="userInfo.headImg" alt="" />
        </div>
        <div class="userName" style="color:white">
          <p style="font-size:50px;margin-top:120px;margin-bottom:-35px;">{{userInfo.nickName}}</p>
          <p style="font-size:40px;">{{userInfo.status==1?'普通用户':'会员'}}</p>
        </div>
      </div>
      <!-- 头部右侧视图 -->
      <!-- <div class="rightBox">
        <img
          width="60px"
          height="60px"
          src="../../static/images/personal/personal.png"
          alt=""
        />
      </div> -->
    </div>
    <!--资产  -->
    <div class="assets">
      <p>我的资产</p>
      <div class="underAsssts">
        <div class="item">
          <p>0</p>
          <p>余额</p>
        </div>
        <div class="item">
          <p>0</p>
          <p>余额</p>
        </div>
        <div class="item">
          <p>0</p>
          <p>余额</p>
        </div>
        <div class="item">
          <p>0</p>
          <p>余额</p>
        </div>
        <div class="item">
          <p>0</p>
          <p>余额</p>
        </div>
      </div>
    </div>
    <!--区域块快捷导航-->
    <div class="navigation">
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem">
        <van-icon name="wap-home-o" />
        <p>我的订单</p>
      </div>
      <div class="goOtherItem"></div>
    </div>
      <!-- 退出登录 -->
    <van-button class="perLoginBtn" type="default" size="large" @click="deletetoken">退出登录</van-button>

  </div>
</template>

<script>
import UpView  from '../../components/upView'
import {readToken,deleteToken} from '@/utils/auth'
import { mapState } from 'vuex'
export default {
  name: "personal",
  components:{UpView},
  mounted() {
    // 尝试读取token，如果没有，就需要登录
    let token=readToken()
    if(!token){
      // 如果token不存在，就自动跳转到login页面
      this.$router.push('/login')
    }
    // 如果有token，展示用户信息
  },
  computed:{
    ...mapState({
      userInfo:state=>state.login.userInfo
    })
  },
  methods: {
    // 挂载直接判断需不需要登录
    // toLogin(){
    //   let arr = readToken();
    //      if (arr) {
    //         return
    //      }else{
    //         this.$router.push("/login");
    //      }
    // },
    // goLogin(){
    //   this.$router.push('/login')
    // },
  //  退出登录
   deletetoken(){
      // 删除token并跳转到首页
      deleteToken();
      this.$router.push('/home')
    }
}
}
</script>

<style lang="less" scoped>
body {
  background: #f4f4f4;
}
.personalContainer {
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 140px;
    background: #f4c97e;
    display: flex;
    justify-content: space-between;
    .leftBox {
      display: flex;
      .imgBox {
        margin: auto 15px;
        width: 70px;
        height: 70px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .assets {
    background: #ffffff;
    padding-left: 15px;
    p {
      font-size: 15px;
    }
    .underAsssts {
      border-top: 1.5px solid #e1e1e1;
      display: flex;
      justify-content: space-between;
      margin-right: auto;
      padding-right: 20px;
      .item {
        text-align: center;
      }
    }
  }
  .navigation {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goOtherItem {
      box-sizing: border-box;
      font-size: 27px;
      width: 33%;
      height: 100px;
      background: #ffffff;
      text-align: center;
      padding-top: 25px;
      margin-bottom: 2px;
      p {
        margin-top: 0px;
        font-size: 10px;
      }
    }
  }
  .perLoginBtn {
    border-radius: 6px;
    margin-bottom: 10px;
  }
}
</style>
